/*
 * @description: 项目入口
 * @Author: along
 * @Date: 2021-03-15
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-10 17:09:39
 */
<template>
    <div class="zsdx_page">
        <!-- 左侧菜单 -->
        <div class="zsdx_left">
            <div class="header">
                <i class="iconfont icon-logo"></i>
                <span class="header_title">掌上大学</span>
            </div>
            <div class="menu-list-wrap">
                <el-menu
                    :default-active="defaultActiveMenu"
                    class="el-menu-vertical-demo"
                    background-color="rgba(35, 36, 42, 1)"
                    text-color="rgba(255, 255, 255, 0.5)"
                    active-text-color="#20A0FF"
                    :unique-opened="false"
                    :collapse="false"
                    @select="fnChangeMenu"
                    ref="elMenu"
                >
                    <el-menu-item index="/manage-lead">
                        <template slot="title">
                            <i class="iconfont icon-shouye" />
                            <span>店铺概括</span>
                        </template>
                    </el-menu-item>
                    <el-submenu index="/goods" >
                        <template slot="title">
                            <i class="iconfont icon-huodong3x icon-sidebar" />
                            <span>校园商城</span>
                        </template>
                        <el-submenu
                            class="to_submenus"
                            index="/manage/z"
                        >
                            <template
                                slot="title"
                                class="el-menu-list"
                            >
                                <i class="iconfont icon-shangpin11 icon-sidebar" />
                                <span>商品管理</span>
                            </template>
                            <el-menu-item
                                class="menu-third"
                                index="/good-list"
                            >
                                自营商品列表
                            </el-menu-item>
                            <el-menu-item
                                class="menu-third"
                                index="/good-tk-list"
                            >
                                淘客商品列表
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu
                            class="to_submenu"
                            index="/manage/a"
                        >
                            <template
                                slot="title"
                                class="el-menu-list"
                            >
                                <i class="iconfont icon-dingdan11 icon-sidebar" />
                                <span>订单管理</span>
                            </template>
                            <el-menu-item
                                class="menu-third"
                                index="/order-list"
                            >
                                订单列表
                            </el-menu-item>
                            <!-- <el-menu-item
                                class="menu-third"
                                index="/order-list-tbk"
                            >
                                淘客订单列表
                            </el-menu-item> -->
                            <el-menu-item
                                class="menu-third"
                                index="/good-after-protection"
                            >
                                售后维权
                            </el-menu-item>
                            <el-menu-item
                                class="menu-third"
                                index="/dispute"
                            >
                                纠纷单列表
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item
                            index="/finance"
                            class="menu-second"
                        >
                            <template slot="title">
                                <i class="iconfont icon-caiwu11" />
                                <span>商城财务</span>
                            </template>
                        </el-menu-item>
                        <el-submenu
                            class="to_submenu"
                            index="/manage/b"
                        >
                            <template
                                slot="title"
                                class="el-menu-list"
                            >
                                <i class="iconfont icon-dianpushezhi icon-sidebar" />
                                <span>店铺管理</span>
                            </template>
                            <el-menu-item
                                class="menu-third"
                                index="/good-after-sale"
                            >
                                售后设置
                            </el-menu-item>
                            <el-menu-item
                                class="menu-third"
                                index="/goods-freight"
                            >
                                配送管理
                            </el-menu-item>
                            <el-menu-item
                                class="menu-third"
                                index="/shop"
                            >
                                店铺信息
                            </el-menu-item>
                            <el-menu-item
                                class="menu-third"
                                index="/shop-public"
                            >
                                店铺公告
                            </el-menu-item>
                        </el-submenu>
                        <el-submenu
                            class="to_submenu"
                            index="/manage/c"
                        >
                            <template
                                slot="title"
                                class="el-menu-list"
                            >
                                <i class="iconfont icon-yingxiaoguanli3x icon-sidebar" />
                                <span>营销管理</span>
                            </template>
                            <el-menu-item
                                class="menu-third"
                                index="/full-reduction"
                            >
                                满减优惠
                            </el-menu-item>
                            <el-menu-item
                                class="menu-third"
                                index="/group-buying"
                            >
                                团购优惠
                            </el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item
                        index="/perfect"
                        class="menu-second"
                    >
                        <template slot="title">
                            <i class="iconfont icon-qinshizhuanqu" />
                            <span>入驻流程</span>
                        </template>
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="zsdx_right">
            <!-- 导航部分 -->
            <div class="__header">
                <div class="__header_box">
                    <div class="header_left">
                        <i
                            class="iconfont icon-dangqianweizhi"
                            :style="{marginRight: '8px', top: '1px', position: 'relative'}"
                        />当前位置:
                    </div>
                    <router-link
                        v-for="(row,index) in header"
                        :key="index"
                        :to="!!row.path ? row.path : ''"
                        :style="{color: 'rgba(51, 51, 51, 1)'}"
                    >
                        {{ row.title }}{{ index === header.length - 1 ? '' : '/' }}
                    </router-link>
                </div>
                <!-- 右侧按钮 -->
                <div class="page-header-info">
                    <div v-if="Number(deposit_money) === 0" class="zsdx_bood" @click="() => {
                        this.$router.push({
                            name: 'paymentBood'
                        })
                    }">
                        充值保证金
                    </div>
                    <el-dropdown
                        class="user-head-wrapper pointer"
                        placement="bottom-end"
                        @command="handleClick"
                    >
                        <div class="user-info-wrap">
                            <div
                                class="user-head"
                                :style="'background-image: url('+('http://pic.wxhand.com/wei_image/f34d34f8c2f2ca5b5d732cdb0be9c9d4.png')+')'"
                            />
                            <div class="user-name ellipsis">
                                {{ '掌上大学' }}
                            </div>
                            <i class="iconfont icon-zhedie " />
                        </div>

                        <el-dropdown-menu
                            slot="dropdown"
                            class="header-nav-dropdown"
                        >
                            <el-dropdown-item command="home">
                                <div
                                    class="drop-menu"
                                    href="javascript:;"
                                >
                                    <img
                                        class="drop-menu-logo"
                                        src="//cdn.zsdx.cn/wei/images/hire/manage/menu-logo1.png"
                                    >
                                    <div class="drop-menu-text">
                                        掌大小店
                                    </div>
                                    <i class="iconfont icon-zhedie" />
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item command="setting">
                                <a
                                    class="drop-menu"
                                    href="javascript:;"
                                >
                                    <img
                                        class="drop-menu-logo"
                                        src="//cdn.zsdx.cn/wei/images/hire/manage/menu-logo2.png"
                                    >
                                    <div class="drop-menu-text">账号管理<span class="phone-number">{{ '17521192130' }}</span></div>
                                    <i class="iconfont icon-zhedie" />
                                </a>
                            </el-dropdown-item>
                            <el-dropdown-item command="logout">
                                <a
                                    class="drop-menu"
                                    href="javascript:;"
                                >
                                    <img
                                        class="drop-menu-logo"
                                        src="//cdn.zsdx.cn/wei/images/hire/manage/menu-logo3.png"
                                    >
                                    <div class="drop-menu-text">退出登录</div>
                                    <i class="iconfont icon-zhedie" />
                                </a>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

            <!-- 主体内容 -->
            <div
                class="_content-wrap"
            >
                <div class="_content-left">
                    <router-view />
                </div>
                <div
                    class="_content-right"
                    :style="{width: showMessage ? '288px' : 0, marginRight: showMessage ? '12px' : 0}"
                >
                    <div class="message-wrap">
                        <message />
                    </div>
                    <div
                        class="btn-hide"
                        @click="fnToggleShowMessage(false)"
                    >
                        <span>收起面板</span><i class="iconfont icon-zhedie" />
                    </div>
                </div>
            </div>
        </div>
        <div
            class="btn-show-message _target"
            :class="{'btn-show-message-visiable': !showMessage}"
            :style="{ top:top }"
            @mousedown="fnMouseDown"
        >
            <i class="iconfont icon-zhedie _target" />
            <span class="_target">展开面板</span>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import message from '@/components/common/message';
import checkShopVerfy from '@/assets/mixin/check-info.js';
export default {
    mixins: [checkShopVerfy],
    components: {
        message
    },
    data() {
        return {
            defaultActiveMenu: '',
            top: 0,
        };
    },
    watch: {
        '$route': {
            handler: 'resetData',
            immediate: true
        }
    },
    computed: {
        ...mapState({
            header: state => state.header.header,
            userinfo: state => state.userInfo.userInfo,
            showMessage: state => state.theme.showMessage,
            deposit_money: state => state.common.deposit_money
        })
    },
    created(){
        let messageShow = localStorage.getItem('MESSAGE_HIDE') ? false : true;

        this.$store.commit('theme/SET_MESSAGE_SHOW', messageShow);
        this.$nextTick(() =>{
            this.top = localStorage.getItem('customerTop') || 'calc(100vh - 52px)';
        });
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 项目主入口逻辑处理
         */
        init () {
            /**
             * @des 查询店铺状态
             * @return {Object}
             *      verify: 店铺入驻审核状态, -2:未提交, 0:待审核, 1:审核通过, -1:审核不通过
             *      student_result_alert: 入驻结果已查看, 0:否, 1:是
             */
            this.checkShopVerfy(resp => {
                if(resp.verify === 1 && resp.student_result_alert === 1) {
                    this.$router.push({
                        name: 'manageLead'
                    });
                    this.checkData();
                } else {
                    this.$router.push({
                        name: 'perFect'
                    });
                }
            });
        },

        /**
         * @description 相关数据查询
         */
        checkData () {
            // 保证金相关查询
            this.$post('/Deposit/getForPay', {}, resp => {
                if (resp.code == 1) {
                    this.$store.commit('common/SET_DEPOSIT_MONEY', resp.data.deposit_money);
                }
            });
        },

        /**
         * @description 路由处理
         */
        resetData (to) {
            this.defaultActiveMenu = '/manage-lead';
        },

        /**
         * @description 退出登录
         */
        handleLogout() {
            this.$post('', {}, (resp) => {
                if (resp.code == 1) {
                    this.$goLogin();
                }
            });
        },

        /**
         * @description 路由跳转处理
         */
        fnChangeMenu(index){
            let path = index;
            let query = {};

            if(index == '/order-list-tbk'){
                path = '/order-list';
                query= {
                    ORDER_TYPE: 'tbk'
                };
            }
            this.$router.push({path: path, query: query});
        },

        /**
         * @description 菜单处理
         */
        handleClick(commend){
            switch(commend){
                case 'home':
                    window.open(process.env.VUE_APP_HOME_HOST);
                    break;
                case 'setting':
                    // this.$router.push({
                    //     path: '/manage/market/componey-info'
                    // });
                    break;
                case 'logout':
                    this.handleLogout();
                    break;
                default:
                    break;
            }
        },
        fnToggleShowMessage(value){
            this.$store.commit('theme/SET_MESSAGE_SHOW', value);
        },
        fnMouseDown(e){
            // console.log('move');
            this.isMoving = true;
            this.startPoint = {
                y: e.clientY
            };
            document.onmousemove = (me) => {
                // console.log('================mouseMove');
                if(this.isMoving && this.startPoint){
                    let top = me.pageY-20;

                    if(top< 80){
                        top = 80;
                    }else if(top > document.body.clientHeight -80){
                        top = document.body.clientHeight - 80;
                    }
                    this.top = top+'px';
                }
            };
            document.onmouseup = (ue) => {
                // console.log('================mouseUp');
                let dist = ue.clientY - this.startPoint.y;

                if(this.isMoving){
                    ue.stopPropagation();
                    this.isMoving = false;
                    setTimeout(() => {
                        this.startPoint = '';
                        localStorage.setItem('customerTop', this.top);
                    }, 10);
                }
                if(ue.srcElement.className.indexOf('_target') >= 0 && Math.abs(this.startPoint.y - ue.clientY) < 4){
                    this.fnToggleShowMessage(true);
                }
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
    },
};
</script>

<style lang="less" scoped>
._content-wrap{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    padding: 12px;
    padding-right: 0;
}
._content-left{
    flex: 1;
    overflow: auto;
    height: 100%;
    margin-right: 12px;
}
._content-right{
    box-sizing: border-box;
    margin-right: 12px;
    height: 100%;
    width: 288px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: all 0.3s ease;
}
.message-wrap{
    width: 100%;
    flex: 1;
    overflow: auto;
    overflow-x: hidden;
    background: #fff;
}
.btn-hide{
    width: 100%;
    line-height: 40px;
    border-top: 1px solid #F0F2F5;
    color: #999999;
    font-size: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover{
        color: #20a0ff;
    }
    .icon-zhedie{
        font-size: 14px;
    }
}

.btn-show-message{
    position: fixed;
    right: -91px;
    bottom: 50px;
    z-index: 50;
    width: 91px;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 0px rgba(153, 169, 192, 0.3);
    border-radius: 100px 0px 0px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    transition: right 0.3s ease;
    cursor: pointer;
    font-size: 14px;
    .icon-zhedie{
        font-size: 14px;
        transform: rotate(180deg);
    }
    &.btn-show-message-visiable{
        right: 0;
    }
}
.zsdx_page {
    width: 100vw;
    height: 100%;
    // overflow: hidden;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    .zsdx_left {
        width: 220px;
        height: 100%;
        background-color: rgba(35, 36, 42, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        .header {
            width: 220px;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon-logo {
                font-size: 32px;
                color: rgba(255, 255, 255, 1);
                margin-right: 10px;
            }
            .header_title {
                color: rgba(255, 255, 255, 0.85);
                font-size: 20px;
            }
        }
        .menu_item {
            width: 220px;
            height: 50px;
            overflow: hidden;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 20px;
            cursor: pointer;
            &:hover {
                background-color: rgba(24,144,255,.2) !important;
            }
            .iconfont {
                color: rgba(255, 255, 255, 0.6);
                font-size: 14px;
            }
            .menu_title {
                color: rgba(255, 255, 255, 0.6);
                font-size: 14px;
                margin-left: 10px;
            }
        }
    }
    .zsdx_right {
        width: calc(100vw - 220px);
        display: flex;
        height: 100%;
        box-sizing: border-box;
        flex-direction: column;
        .__header {
            justify-content: space-between;
            width: 100%;
            height: 64px;
            display: flex;
            align-items: center;
            background-color: #ffffff;
            padding-right: 32px;
            cursor: pointer;
            .__header_box {
                display: flex;
                align-items: center;
                .header_left {
                    color: rgba(51, 51, 51, 1);
                    font-size: 14px;
                    margin-left: 32px;
                }
            }
            .page-header-info{
                display: flex;
                align-items: center;
                color: #333;
                .zsdx_bood {
                    width: 162px;
                    height: 32px;
                    -webkit-box-shadow: 0 2px 4px 0 rgb(243 134 67 / 46%);
                    box-shadow: 0 2px 4px 0 rgb(243 134 67 / 46%);
                    border-radius: 4px;
                    text-align: center;
                    line-height: 32px;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                    background: #f06e2e;
                    color: #fff;
                    -webkit-animation: al .6s ease-out;
                    animation: al .6s ease-out;
                    margin-right: 20px;
                }
                &-header{
                    background-image: url(//);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    width: 30px;
                    height: 30px;
                    border-radius: 30px;
                    margin-right: 10px;
                }
            }
            .user-info-wrap{
                height: 100%;
                display: flex;
                align-items: center;
                user-select: none;
                outline-color: transparent;
                .user-head{
                    width: 30px;
                    height: 30px;
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    border-radius: 30px;
                }
                .user-name{
                    font-size: 14px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 30px;
                    flex: 1;
                    margin-left: 10px;
                    max-width: 140px;
                }
                .icon-zhedie{
                    font-size: 12px;
                    color:#333;
                    line-height: 30px;
                    margin-left: 5px;
                }
            }
        }
        .__main {
            box-sizing: border-box;
            padding: 12px;
            height: 100%;
            display: flex;
        }
    }
}
</style>
<style lang="less">
// 菜单
.el-menu-vertical-demo {
    width: 222px;
    // 一级
    .el-menu-item {
        height: 54px;
        display: flex;
        align-items: center;
        padding: 0 24px;
        box-sizing: border-box;
        &>i {
            margin-right: 12px;
        }
    }
    &>.el-menu-item:hover {
        background-color: rgba(24,144,255,.2) !important;
        color: #ffffff;
    }
    // 二级
    .el-submenu {
        &>.el-submenu__title {
            &:hover {
                background-color: rgba(24,144,255,.2) !important;
                color: #ffffff;
            }
            &>i {
                margin-right: 12px;
            }
        }
        // 三级
        &>.el-menu {
            &>.el-menu-item {
                &:hover {
                    background-color: rgba(24,144,255,.2) !important;
                    color: #ffffff;
                }
            }
        }
    }

    // 选择
    .is-active {
        &>.el-submenu__title {
            &>i,span {
                color: rgb(32, 160, 255);
            }
        }
    }
}
// 全局样式
.el-table__body-wrapper .el-table__body .el-table__row td {
    border-right: none;
}
.el-table__header-wrapper .el-table__header .has-gutter tr th {
    border-right: none;
}
.el-table .el-table_1_column_6  .cell {
    position: relative;
}
.el-range-editor--small .el-range-separator{
    padding: 0 1px !important;
}
.pagination-wrapper {
    .el-pager {
        .number {
            color: rgba(96, 98, 102, 1) !important;
            background-color: #ffffff !important;
        }
        .active {
            color: rgba(32, 160, 255, 1) !important;
            background-color: #ffffff !important;
        }
    }
    .btn-prev, .btn-next {
        background-color: #ffffff !important;
    }
}
.menu-list-wrap {
    flex: 1;
    overflow-x: auto;
}
.userinfo-wrapper {
    padding: 20px 10px 40px;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    text-align: center;
    background-color: rgba(35, 36, 42, 1);
    .username {
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .el-button--text {
        padding: 0;
        color: #fff;
    }
}
.index-userinfo-popover {
    min-width: auto;

    li {
        cursor: pointer;

        & + li {
            margin-top: 5px;
        }
    }
}

.drop-menu{
    width: 202px;
    height: 40px;
    display: flex;
    align-items: center;
    &-logo{
        width: 14px;
        height: 14px;
        margin-right: 5px;
        user-select: none;
    }
    &-text{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        .phone-number{
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 20px;
        }
    }
    .icon-zhedie{
        font-size: 12px;
        line-height: 20px;
        margin-left: 5px;
        color: #999;
    }
}
.el-message-box__btns {
    .el-button {
        padding: 9px 25px;
    }
}
.menu-list-wrap{
    &::-webkit-scrollbar {
        width: 0px;
    }
}

body ::-webkit-scrollbar {
    width: 4px;
}
</style>